<template>
    <div class="card-content w-p-100 h-p-100 flex flex-col justif-between" :style="{width:width,height:height}">
     <div class="card-number fz-24 text-bold h-p-50 w-p-100 flex-center" :style="{color:color}">{{ value }}</div>
     <div class="card-title h-p-50 w-p-100 flex-center" :style="{color:color}">{{title}}</div>
    </div>
</template>

<script setup>
const porp = defineProps({
    width: {
        Type: String,
        default: '200px'
    },
    height: {
        Type: String,
        default: '100px'
    },
    color: {
        Type: String,
        default: '#00D5E1'
    },
    value: {
        Type: Number,
        default: 0
    },
    title: {
        Type: String,
        default: ''
    },
})

</script>

<style  scoped>

.card-title {
    border: 1px solid #62A2CD;
}

</style>